<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式</title>
</head>

<body>
    <script>
        // 1. 访问属性: obj.foo 
        // 1. Reflect.get() 
        var obj = { foo: 1, bar: 2 }
        var p = new Proxy(obj, {
            get(target, key, receiver) {
                console.log(111111)
                // track(target, key)
                // return target[key] 舍弃
                // receiver相当于函数中的this
                return Reflect.get(target, key, receiver)
            }
        })
        console.log(p.foo)
        console.log('***************')


        // 2. 判断对象或原型上是否存在给定的key: key in obj
        // 2. Reflect.has() 

        var p2 = new Proxy(obj, {
            has(target, key) {
                console.log(222222222)
                // track(target, key)
                return Reflect.has(target, key)
            }
        })

        console.log('foo' in p2)
        console.log('***************')

        // 3. 使用for...in循环遍历对象: for (const key in obj) {}
        // Reflect.ownKeys(target)

        const ITERATE_KEY = Symbol()

        var p3 = new Proxy(obj, {
            ownKeys(target) {
                console.log(33333333333)
                // track(target, ITERATE_KEY)
                return Reflect.ownKeys(target)
            }
        })

        for (const key in p3) {
            console.log(key)
        }
        console.log('***************')


        // 4. 删除对象的属性
        // Reflect.deleteProperty()

        var p4 = new Proxy(obj, {
            deleteProperty(target, key) {
                console.log(44444444)
                const hadkey = Object.prototype.hasOwnProperty.call(target, key)
                const res = Reflect.deleteProperty(target, key)
                if (res && hadkey) {
                    // trigger(target, key, 'DELETE')
                }
                return res
            }
        })

        console.log(obj)
        delete p4.foo
        console.log(obj)
        console.log('***************')

    </script>
</body>

</html>